<template>
	<div>

		<div class="container-fluid content" v-if="!islogin">
			<div class="row">
				<div class="body-login">
					<div class="center-login">
						<a href="#" class="logo pull-left hidden-xs">
							<img src="./assets/img/logo-login.png" height="45" alt="NADHIF Admin" />
						</a>

						<div class="panel panel-login">
							<div class="panel-title-login text-right">
								<h2 class="title"><i class="fa fa-user"></i> 登录</h2>
							</div>
							<div class="panel-body">
								<div class="form-group">
									<label>登录帐号</label>
									<div class="input-group input-group-icon">
										<input name="username" type="text" maxlength="11" class="form-control bk-noradius" v-model="username"/>
										<span class="input-group-addon">
												<span class="icon">
													<i class="fa fa-user"></i>
												</span>
											</span>
									</div>
								</div>

								<div class="form-group">
									<label>登录密码</label>
									<div class="input-group input-group-icon">
										<input name="pwd" type="password" maxlength="16" class="form-control bk-noradius" v-model="password"/>
										<span class="input-group-addon">
												<span class="icon">
													<i class="fa fa-lock"></i>
												</span >
											</span>
									</div>
								</div>

								<div class="form-group">
									<label>验证码</label>
									<div class="input-group input-group-icon" style="width: 100px;">
										<input name="pwd" type="text" maxlength="16" class="form-control bk-noradius" v-model="capcha"/>
										<span class="input-group-addon">
												<!--<img alt="" src="http://test.iot.idao.me/capcha/code" height="34">
												 onclick="javascript:document.getElementById('capcha').value='';this.src='http://test.iot.idao.me/capcha/code?_='+Math.random()"
												-->
												<img alt="" src="http://iot.atwulian.com/capcha/code" height="34" @click="$event.target.src='http://iot.atwulian.com/capcha/code?_='+Math.random()">
											</span>
									</div>
								</div>

								<div class="form-group">
									<button class="btn btn-primary" @click="login">登录</button>
								</div>

								<div class="form-group result-msg">
									{{loginToken.resultMsg}}
									{{resultMsg}}
								</div>

							</div>
						</div>
					</div>
				</div>
			</div>
		</div>


		<!-- login -->
		<div v-if="islogin">

			<lsc-nav></lsc-nav>
			<lsc-body>
				<lsc-navbar></lsc-navbar>
				<lsc-breadcrumb>

					<router-view></router-view>

				</lsc-breadcrumb>
			</lsc-body>

		</div>
		<!-- login end -->


		<div class="loader" v-if="loading">
			<div class="loader-inner ball-clip-rotate">
				<div></div>
			</div>
		</div>

	</div>
</template>
<script>

	import LscBody from './components/admin_body.vue'
	import LscNavbar from './components/admin_navbar.vue'
	import LscBreadcrumb from './components/admin_breadcrumb.vue'
	import LscNav from './components/admin_nav.vue'
	import {mapGetters} from 'vuex'

	export default{
		name: 'app',
		computed: {
			...mapGetters({
				loading: 'getLoading',
				loginStatus: 'getLoginStatus',
				capchaCode: 'getCapcha',
				loginToken: 'getTokenKey'
			})
		},
		data () {
			return {
				username: '',
				password: '',
				capcha: '',
				islogin: 0,
				resultMsg: ''
			}
		},
		methods: {
			login () {
				var params = {
					username: this.username,
					password: this.password,
					capcha: this.capcha
				}
				// 配合token使用
			//	this.$store.dispatch('fetchToken', params)

				this.$store.dispatch('fetchLogin', params)
			}
		},
		mounted () {


			// 配合token使用
		//	this.islogin = localStorage.getItem("tokenKey")

			this.islogin = localStorage.getItem("sessionVal")*1

		},
		components: {
			LscBody,
			LscNavbar,
			LscBreadcrumb,
			LscNav
		},
		watch: {
			// 配合token使用
			/*loginToken(newval) {
				this.islogin = localStorage.getItem("tokenKey")

				// 用户信息
				this.$store.dispatch('fetchProfile')
			},*/
			loginStatus (newval) {

				if(!newval.success) {
					localStorage.setItem("sessionVal", 0);
				}else {
					localStorage.setItem("sessionVal", 1);
				}

				this.islogin = localStorage.getItem("sessionVal")*1
				this.resultMsg = newval.resultMsg

				// 用户信息
				this.$store.dispatch('fetchProfile')
			}
		}
	}
</script>

<style>

	.result-msg {
		color: #c7254e;
	}
	.loader {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		box-sizing: border-box;
		display: flex;
		flex: 0 1 auto;
		flex-direction: column;
		flex-grow: 1;
		flex-shrink: 0;
		flex-basis: 100%;
		/*max-width: 100%;
		height: 600px;*/
		background: rgba(0,0,0,0.2);
		align-items: center;
		justify-content: center;
		z-index: 9999;
	}

	.ball-clip-rotate > div {
		background-color: #fff;
		width: 15px;
		height: 15px;
		border-radius: 100%;
		margin: 2px;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		border: 2px solid #000;
		border-bottom-color: transparent;
		height: 25px;
		width: 25px;
		background: transparent !important;
		display: inline-block;
		-webkit-animation: rotate 0.75s 0s linear infinite;
		animation: rotate 0.75s 0s linear infinite; }

	@keyframes rotate {
		0% {
			-webkit-transform: rotate(0deg) scale(1);
			transform: rotate(0deg) scale(1); }

		50% {
			-webkit-transform: rotate(180deg) scale(0.6);
			transform: rotate(180deg) scale(0.6); }

		100% {
			-webkit-transform: rotate(360deg) scale(1);
			transform: rotate(360deg) scale(1); } }

	@keyframes scale {
		30% {
			-webkit-transform: scale(0.3);
			transform: scale(0.3); }

		100% {
			-webkit-transform: scale(1);
			transform: scale(1); } }

</style>
